<template>
	<view class="loginContainer">
		<nav-top :title="title"></nav-top>
		<view class="login">
			<view class="btn">
				<u-form
					labelPosition="left"
					:model="modelName"
					:rules="rules"
					ref="uForm">
					<u-form-item
						prop="userInfo.nickName"
						label="昵称:"
						ref="item1">
						<u-input placeholder="请输入昵称" v-model="modelName.userInfo.nickName"  border="bottom"></u-input>
					</u-form-item>
					<u-form-item
						prop="userInfo.password"
						label="密码:"
						ref="item2">
						<u-input password="true" placeholder="请输入密码" v-model="modelName.userInfo.password"  border="bottom"></u-input>
					</u-form-item>
				</u-form>
			</view>
			<fui-button class="login-btn" width="80vw" @click="loginClick">立即登录</fui-button>
			
			<navigator url="register" open-type="navigate" class="reg">注册账户&gt;</navigator>
			<u-toast ref="uToast" @click="showToast"></u-toast>
		</view>
	</view>
</template>

<script>
	import navTop from '@/components/topnav/topNav.vue'
	import fuiInput from "@/components/firstui/fui-input/fui-input.vue"
	import fuiButton from "@/components/firstui/fui-button/fui-button.vue"
	import storage from '@/utils/storage.js'
	import dayjs from '@/utils/dayjs.js'
	import { accountLoginRequest } from '@/service/login/login.js'
	export default {
		components: {
			navTop,
			fuiInput,
			fuiButton,
		},
		data() {
			return {
				avatarUrl: '/static/images/common/unlogin.png',
				nickname: '',
				phone: '',
				show: false,
				value1: Number(new Date()),
				dateIcon: '/static/images/common/date.png',
				dateString: '',
				title: '登录',
				modelName: {
					userInfo: {
						nickName: '',
						password: '',
					}
				},
				rules: {
					'userInfo.nickName': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.password': {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}
				}
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		created() {
			this.$store.dispatch('login/test','这是参数')
		},
		methods: {
			onChooseAvatar(e) {
				this.avatarUrl = e.detail.avatarUrl
			},
			onNickName(e) {
				this.nickname = e.detail.value
			},
			getphonenumber (e) {
				console.log(e)
			},
			cancel(e) {
				this.show = false
			},
			confirm(e) {
				this.dateString = dayjs(e.value).format('YYYY/MM/DD')
				this.show = false
			},
			focus() {
				this.show = true
			},
			showToast(data) {
				this.$refs.uToast.show(data)
			},
			async loginClick() {
				const _this = this
				const data = {
					username: this.modelName.userInfo.nickName,
					password: this.modelName.userInfo.password
				} 
				const result = this.$store.dispatch('login/accountLoginAction', data)
				result.then(res=> {
					if(res.statusCode == 400) {
						_this.showToast({
							type: 'error',
							title: res.data,
							message: res.data
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .ljs-top .top .topMain .title {
		margin: 0 auto;
		font-weight: 600;
		font-size: 18px!important;
	} 
	.login {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		height: 100vh;
		margin-top: -40px;
	}
	.login .img {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
	}
	
	.avatar-wrapper {
		width: 100px;
		border-radius: 50px;
		background-color: #eee;
		background-size: cover;
		font-size: 12px;
		padding: 5;
		line-height: 21px;
		margin-bottom: 20px;
		margin-top: 20px;
	}
	
	.login-btn {
		margin-top: 40px;
	}
	
	.reg {
		margin-top: 10px;
	}
	
	
</style>